(function($) {
    //Le nombre de question totale
    var nbQuestionsMax = 10;
    //le nombre de question traitée
    var nbQuestionCourant = 0;
    //Position du curseur dans le fichier
    var ligneFichierTXT = 0;
    var tailleFichier = 422;
    var arrayStation = {};
    var reponsesAffichees = false;
    var reponses = [];
    var nbAleatoire = [];
    var compteur = 0;

    //On créer une balise canvas
    var canvas = $('<canvas width="880px" height="810px" />');
    var div = $('#canvas');

    div.append(canvas);
    //On recupère le context du canvas
    var ctx = canvas[0].getContext('2d');

    //On dessine le plan
    dessinerImage();

    //Initialisation de XMLHTTP
    var xhr = init();

    //Evenement sur click sur le bouton 
    $('#commencer').click(function() {
        if(!reponsesAffichees){
            $('#valider').button('active');
            $('#commencer')[0].disabled = true;
            $('#reponse')[0].disabled = false;
            requestServeur("question");
            nbQuestionCourant++;
        }else{
        //Réinitialisation des toutes les variables, pour recommencer la partie
            nbQuestionsMax = 10;
            nbQuestionCourant = 0;
            ligneFichierTXT = 0;
            tailleFichier = 422;
            arrayStation = {};
            reponsesAffichees = false;
            reponses = [];
            nbAleatoire = [];
            compteur = 0;
            nbQuestionCourant = 0;
            initTableau();
            requestServeur("supprimerreponses");
            dessinerImage();        
            $('#valider').button('active');
            $('#commencer')[0].disabled = true;
            $('#reponse')[0].disabled = false;
            requestServeur("question");
            nbQuestionCourant++;
        }
    });

    function initTableau(){
        tableau = document.getElementById('tableau');
        enfants = tableau.childNodes;
        for (var i = enfants.length - 1; i >= 0; i--) {
            if(enfants[i].nodeName !== 'CAPTION' && enfants[i].nodeType === 1){
                tableau.removeChild(enfants[i]);
            }
        }
    }

    //Evenement sur click sur le bouton 
    $('#valider').click(function() {
        if (nbQuestionCourant <= nbQuestionsMax) {
            if (encodeURIComponent($('#reponse')[0].value) !== "") {
                dessinerImage();
                //Envoie de la requête pour enregistrer la réponse de l'utilisateur
                requestServeur("reponse");
                ligneFichierTXT = Math.floor((Math.random()*tailleFichier)+1);
                while(nbAleatoire.indexOf(ligneFichierTXT) >= 0){
                    ligneFichierTXT = Math.floor((Math.random()*tailleFichier)+1);
                }
                nbAleatoire[compteur++] = ligneFichierTXT;
                if(nbQuestionCourant !== nbQuestionsMax){
                    //Envoie de la requête pour récupérer la réponse suivante 
                    requestServeur("question");
                }
                if ($('#erreur')[0] !== undefined)
                    $('#choix')[0].removeChild($('#erreur')[0]);
                $('#reponse')[0].value = "";
                nbQuestionCourant++;
            } else {
                if ($('#erreur')[0] === undefined) {
                    var alert = document.createElement('div');
                    var nomclass = document.createAttribute('class');
                    nomclass.value = "alert alert-error";
                    alert.id = "erreur";
                    alert.setAttributeNode(nomclass);
                    var erreur = document.createTextNode('Le nom de la station est manquant!');
                    alert.appendChild(erreur);
                    $('#choix')[0].appendChild(alert);
                }
            }
        } else {
            if(!reponsesAffichees){
                $('#reponse')[0].value = "";
                $('#valider')[0].disabled = true;
                $('#commencer')[0].disabled = false;
                $('#reponse')[0].disabled = true;                
                requestServeur("affichage");
                reponsesAffichees = true;
            }
        }
    });


    //Fonction qui dessine un rond à une position de la station
    function genererUneStation(stationXML) {
        var station = stationXML.getElementsByTagName('item');
        arrayStation = {
            id: station[0].attributes[0].value,
            nom: station[1].attributes[0].value,
            x: Math.round(parseInt(station[2].attributes[0].value) / 10.0),
            y: Math.round(parseInt(station[3].attributes[0].value) / 10.0)
        };

        ctx.beginPath();
        ctx.arc(arrayStation['x'], arrayStation['y'], 5, 0, Math.PI * 2);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
    }


    //Dessine un rond d'une couleur donnée à une position donnée  
    function afficherResultat(x, y, couleur) {
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, Math.PI * 2);
        ctx.fillStyle = couleur;
        ctx.fill();
        ctx.closePath();
    }

    function init() {
        if (window.XMLHttpRequest || window.ActiveXObject) {
            if (window.ActiveXObject) {
                try {

                    return xhr = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    return xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
            } else {
                return xhr = new XMLHttpRequest();
            }
        } else {
            alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        }
    }

    function requestServeur(type) {
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                if (type === "question")
                    genererUneStation(xhr.responseXML);
                else if (type === "affichage")
                    traitementReponse(xhr.responseXML);
            }
        };

        if (type === "question") {
            xhr.open("GET", "php/gestionQuestions.php?ligne=" + ligneFichierTXT, true);
        } else if (type === "reponse") {
            var reponse = encodeURIComponent($('#reponse')[0].value);
            var param = "?reponse=" + reponse + "&id_station=" + arrayStation['id'] +
                    "&x_station=" + arrayStation['x'] +
                    "&y_station=" + arrayStation['y'];
            xhr.open("GET", "php/gestionReponse.php" + param, false);
        } else if (type === "affichage") {
             xhr.open("GET", "php/verifierReponseEtEnvoyerReponse.php", true);
        }else if (type === "supprimerreponses"){
            xhr.open("GET", "php/supprimerFichier.php", false);
        }
        xhr.send(null);
    }
    
    //Récupère toutes les réponses de l'utulisateur, dans le cas d'une bonne réponse, on dessine
    //un rond vert, dans l'autre cas on dessine un rond rouge
    //On construit un tableau de mauvaises cliquables des mauvaises réponses
    function traitementReponse(data){
        var listReponses = data.getElementsByTagName('item');
        var cpt1 = 0;
        $("#caption")[0].innerHTML  = "Mauvaise(s) Réponse(s)";
        for (var i = 0, cpt = 0; i < listReponses.length; i++, cpt++) {
            var tab = listReponses[i].textContent.split(',');
            var etat = listReponses[i].attributes[0].nodeValue;
            var x = parseInt(tab[1]);
            var y = parseInt(tab[2]);            

            if(!estPresent(tab[0], x, y)){
                reponses[cpt1] = [tab[0], x, y];
                if(etat==='true'){               
                    afficherResultat(x, y, 'green');
                }
                else{                
                    ajouterLaMauvaiseReponseTableau(tab);         
                    afficherResultat(x, y, "red");
                }
                cpt1++;
            }

        }
        tabA = document.getElementsByTagName('a');
        for (var i = tabA.length - 1; i >= 0; i--) {
            tabA[i].addEventListener('click', function(event){
               dessinerReponse(event.target.innerHTML);               
            }, false);
        };
    }


    function estPresent(station, x, y){
        for (var i = reponses.length - 1; i >= 0; i--) {
            if(reponses[i][0] === station){
                if(reponses[i][1] !== x || reponses[i][2] !== y){
                    return false;
                }else{
                    return true;
                }
            }
        }
        return false;
    }

    //Pour la correction des mauvaises réponses
    //Quand un utlisateur clique sur une mauvaise réponse
    //on affiche visuellement la position exacte de la station
    function dessinerReponse(station){
        console.log(reponses.length);
        for (var i = 0; i < reponses.length; i++) {
            if(reponses[i][0] === station){
                var x = reponses[i][1];
                var y = reponses[i][2];
                ctx.beginPath();
                ctx.arc(x, y, 6, 0, Math.PI * 2);
                ctx.strokeStyle = 'blue';
                ctx.stroke();
                ctx.closePath();
            }
        };
    }

    //Création d'un tableau  des mauvaises réponses
    function ajouterLaMauvaiseReponseTableau(tab){
        table = document.getElementById('tableau');
        tr = document.createElement('tr');        
        a = document.createElement('a');       

        nom = document.createTextNode(tab[0]);
        td = document.createElement('td')
        a.appendChild(nom);
        td.appendChild(a);
        tr.appendChild(td);

        x   = document.createTextNode(tab[1]);
        td = document.createElement('td')
        td.appendChild(x);
        tr.appendChild(td);

        y   = document.createTextNode(tab[2]);
        td = document.createElement('td')
        td.appendChild(y);
        tr.appendChild(td);

       
        table.appendChild(tr);
    }

    //dessine un plan
    function dessinerImage() {
        var iplan = new Image();
        ctx.clearRect(0, 0, canvas[0].width, canvas[0].height);
        iplan.onload = function() {
            ctx.drawImage(this, 0, 0);
        };
        iplan.src = "img/plan_metro_RATP_02-13Reduit.jpg";
    }
})(jQuery);